<template>
<!--
  文章详情页
  时间 2023年10月25日 07点44分

-->
  <div class="article_details">
    <div class="details_left" v-html="htmlContent">
    </div>
    <div class="details_right">
      <div class="details_right_title">本页目录</div>
      <div class="directory_box">
        <div class="outline_marker"></div>
<!--        <ul class="directory_ul">-->
<!--          <li v-for="item of hTagArr.h2" :key="item">-->
<!--            <a :href="'#2-'+item">{{item}}</a>-->
<!--          </li>-->
<!--&lt;!&ndash;          <li>&ndash;&gt;-->
<!--&lt;!&ndash;            <a href="#2-操作系统的功能和目标">操作系统的功能和目标</a>&ndash;&gt;-->
<!--&lt;!&ndash;          </li>&ndash;&gt;-->
<!--&lt;!&ndash;          <li>&ndash;&gt;-->
<!--&lt;!&ndash;            <a href="#2-操作系统的特征">操作系统的特征</a>&ndash;&gt;-->
<!--&lt;!&ndash;          </li>&ndash;&gt;-->
<!--&lt;!&ndash;          <li>&ndash;&gt;-->
<!--&lt;!&ndash;            <a href="#2-操作系统的发展与分类">操作系统的发展与分类</a>&ndash;&gt;-->
<!--&lt;!&ndash;          </li>&ndash;&gt;-->

<!--        </ul>-->
        <div  v-for="item of hTagArr.h1" :key="item" class="h1_text">
          <a :href="'#1-'+item">{{item}}</a>
        </div>
<!--
  还是不行，因为对于级别，且级别还需要对应，所以用vue写二三级标题还是比较难的
-->

      </div>

    </div>
<!--    {{ $route.params.articleId }}-->
  </div>
</template>
<script setup lang="ts">
import {reactive, ref} from "vue";
  import * as marked from "marked";
  const article=reactive({
    content:"# 认识操作系统\n" +
      "\n" +
      "## 操作系统的概念\n" +
      "\n" +
      "操作系统（Operating System, OS）是指控制和管理整个计算机系统的硬件和软件资源，并且合理的组织调度计算机的工作和资源的分配，以提供给用户和其他软件方便的接口和环境；是计算机系统中最基本的**系统软件**。\n" +
      "\n" +
      "## 操作系统的功能和目标\n" +
      "\n" +
      "### 作为系统资源的管理者\n" +
      "\n" +
      "- 处理机管理\n" +
      "- 存储器管理\n" +
      "- 文件管理\n" +
      "- 设备管理\n" +
      "- 目标是安全、高效\n" +
      "\n" +
      "### 作为用户与计算机硬件之间的接口\n" +
      "\n" +
      "- 命令接口\n" +
      "  - 联机命令接口（用户说一句、系统做一句）：例如CMD窗口\n" +
      "  - 脱机命令接口（用户所一堆、系统做一堆）：例如 .bat 文件 批处理命令接口\n" +
      "- 程序接口（也被称为系统调用）：允许用户通过程序间接调用，由一组系统调用组成。\n" +
      "- GUI（图形用户界面）\n" +
      "- 目标是方便用户使用\n" +
      "\n" +
      "### 作为最接近硬件的层次\n" +
      "\n" +
      "需要提供的功能和目标：实现对硬件机器的拓展。没有任何软件支持的计算机称为裸机。在安装的操作系统，可以提供资源管理功能和方便用户的服务功能，使裸机更加强大、方便。\n" +
      "\n" +
      "## 操作系统的特征\n" +
      "\n" +
      "操作系统具有4大特征：并发、共享、虚拟和异步；其中并发和共享是两个最基本的特征，二者互为存在条件。\n" +
      "\n" +
      "### 并发\n" +
      "\n" +
      "并发是指两个或多个时间在同一时间间隔内发生。而并行值两个或多个事件在同一时刻同时发生。\n" +
      "\n" +
      "操作系统的并发现值计算机系统中同时存在着多个运行着的程序。一个单核处理器同一时刻只能执行一个程序，因此操作系统会负责协调多个程序之间交替执行（从微观上是交替，从宏观上来看就像在同时执行）。\n" +
      "\n" +
      "### 共享\n" +
      "\n" +
      "共享即资源共享，值系统中的资源可提供内存中多个并发执行的进行共同使用。\n" +
      "\n" +
      "如果没有并发，共享就没有意义。所以并发和共享两者二是相互存在的。\n" +
      "\n" +
      "### 虚拟\n" +
      "\n" +
      "虚拟值把一个物理上的实体变为若干个逻辑上的对应物。也正是虚拟处理器技术，使我们的CPU可以同时处理6个程序。其中虚拟技术又分为\n" +
      "\n" +
      "- 空分复用技术（如虚拟存储器技术）\n" +
      "- 时分复用技术（如虚拟处理器）\n" +
      "\n" +
      "**注意：**没有并发就没有虚拟技术\n" +
      "\n" +
      "### 异步\n" +
      "\n" +
      "异步是指在多道程序环境下，允许多个程序并发执行，但由于资源有限，经常的执行不是一贯到底的。是一种走走停停，不可预测的速度向前推进。这就是异步\n" +
      "\n" +
      "**注意：**没有并发就没有异步技术\n" +
      "\n" +
      "## 操作系统的发展与分类\n" +
      "\n" +
      "- 手工输入阶段\n" +
      "  - 缺点是人工的速度太慢，导致计算机使用率过低\n" +
      "- 单道批处理阶段：引入脱机输入/输出，并**监督程序（操作系统的雏形）**负责控制作业的输入和输出。\n" +
      "  - 优点：缓解了一定程度的人机速度矛盾；缺点：内存中仅能一道程序执行，只有程序运行结束后才能调入下一道程序。\n" +
      "- 多道批处理系统阶段：\n" +
      "  - 优点：多道程序并发执行，共享计算机资源。资源利用率大幅提升，CPU和其他资源保持忙碌\n" +
      "  - 缺点：用户响应时间长，没有人及交互功能（用户提交作业后，只能等待计算机处理完成，中间不能控制自己的作业执行）\n" +
      "- 分时操作系统阶段：\n" +
      "  - 计算机以时间片为单位轮流为各个用户/作业服务，各个用户通过终端与计算机进行交互。\n" +
      "  - 优点：用户请求可以被即时响应，解决了人机交互的问题，还允许多个用户同时使用一台计算机，且相互独立。\n" +
      "  - 缺点：不能优先处理一些紧急任务。操作系统各用户/作业都完全公平。\n" +
      "- 实时操作系统阶段：\n" +
      "  - 优点：能够优先响应紧急任务，某些紧急任务不需要排队\n" +
      "  - 在实时操作系统的控制下，计算机系统接收到外部信号后及时进行处理，并且要在严格的时限内处理完事件。主要特点就是**及时性和可靠性**\n" +
      "  - 实时操作系统又分为硬实时系统（必须在绝对严格的规定时间内完成处理）和软实时操作系统（能接受偶尔违反时间规定）\n" +
      "- 其他操作系统这里不在赘述（网络操作系统、分布式操作系统和个人计算机操作系统）" +
      "```public class Main {\n" +
      "    public static void main(String[] args) {\n" +
      "        System.out.println(\"Hello world!\");\n" +
      "    }\n" +
      "}```",
    title:"操作系统",
  });
  const hTagArr=reactive({
    "h1":{},
    "h2":{},
    "h3":{}
  });

  const htmlContent=ref();


  const renderer={
    heading(text:any,level:number):string{
      return `<h${level} id="${level}-${text}">${text}</h${level}>`;
    }
  }


  marked.use({
    async:true,
    pedantic:false,
    gfm:true,
    renderer,
  });
  marked.parse(article.content,{async:true}).then((result:any)=>{
    // console.log(result);
    htmlContent.value=result;
  });

  //ok,接下来我们开发封装一个方法,用来获取h1、h2、h3标签
  //注意,接下里的操作同意都是原生JS
  //我们只获取h1、h2、h3标签
  //多余的不在获取
  function getH() {
    let h1ElementArr:Array<string>=[];
    let h2ElementArr:Array<string>=[];
    let h3ElementArr:Array<string>=[];

    // const h1List=async ()=> document.getElementsByTagName("h1")

    const h1List=document.getElementsByTagName("h1");
    const h2List=document.getElementsByTagName("h2");
    const h3List=document.getElementsByTagName("h3");
    // h1List().then((result)=>{
    //   console.log(result);
    // },(error)=>{
    //   console.log(error);
    // });
    setTimeout(()=>{
      for (const h1ListElement of h1List) {
        h1ElementArr.push(h1ListElement.innerText);
      }
      for (const h2ListElement of h2List) {
        h2ElementArr.push(h2ListElement.innerText);
      }
      for (const h3ListElement of h3List) {
        h3ElementArr.push(h3ListElement.innerText);
      }
      hTagArr.h1=h1ElementArr;
      hTagArr.h2=h2ElementArr;
      hTagArr.h3=h3ElementArr;
    },1);

  }
  getH();



</script>



<style scoped>
.article_details{
  //position: relative;
  display: flex;
  max-width: 1000px;
  //height: 1200px;
  margin: 42px auto 0;
  //overflow: hidden;

}
.article_details_title{
  text-align: center;
}
.details_left{
  flex: 1;
  margin-right: 20px;
  background: #ffffff;
  padding: 20px;
}
.details_right{
  position: sticky;
  width: 280px;
  height: 280px;
  top: 20px;
  background: pink;
  border-radius: 10px;

  z-index: 1;
  overflow: hidden;
}
.details_right_title{
  font-size: 16px;
  font-weight: bold;
}
.directory_box{
  position: relative;
}
.directory_ul{

}
.directory_ul li{
  font-size: 15px;
  line-height: 23px;
  font-weight: 100;
  color: #555555;
}
.outline_marker{
  position: absolute;
  top: 20px;
  background: #42b883;
  width: 4px;
  height: 23px;
  border-radius: 5px;

}
ul{
  list-style: none;
}

</style>
